<template>
	<div class="transfer">
		<back :title="title"></back>
		<div class="box">
		<div class="apply" @click="apply">
			<i class="el-icon-erp-gengduo"></i>
			<p>退货申请</p>
		</div>
		<div class="screen">
			<div class="change" v-for="(item,index) in list" :class="index == sort ? 'active':''" @click="screen(item.status,index)">
				<i :class="item.icon"></i>
				<p>{{item.title}}</p>
			</div>
		</div>
	</div>
		<noorder v-show="isShow"></noorder>
		<div class="body">
		<div class="orderlist" v-for="item in shopList">
			<div class="header">
				<div class="headerleft">					
					<p class="username"><span>{{item.createrName}}</span></p>
					<p class="purchaseOrderSerial"><span>{{item.purchaseOrderSerial}}</span></p>
				</div>
				<div class="headerright">
					<p class="status">
						<span v-if="item.statu==0">已申请</span>
						<span v-else-if="item.statu==1">待出库</span>
						<span v-else-if="item.statu==2">已出库</span>
						<span v-else-if="item.statu==3">厂家收货</span>
						<span v-else-if="item.statu==4">被拒绝</span>
						<span v-else-if="item.statu==7">已完成</span>
					</p>
					<p class="createtime"><span>{{item.createTime}}</span></p>
				</div>							
			</div>
	       <div class="goodsList" v-for="arr in item.purchaseProducts">
	           <div class="left">
	           	  <img :src="arr.thumbnail" />
	           </div>
	           <div class="right">
	           	<p class="title">{{arr.productName}}</p>
	           	<p v-if="item.statu == 0 || item.statu == 4"></p>
	           	<p v-else><span>出库数量：</span><span>{{arr.stockInCount}}</span></p>
	           	<p><span>退货数量：</span><span>{{arr.purchaseCount}}</span></p>
	           	<p v-if="item.statu == 0 || item.status == 4"></p>
	           	<p v-else><span>审批数量：</span><span>{{arr.allowedCount}}</span></p>
	           </div>
	       </div>
	   </div>
	   </div>
	</div>
</template>

<script>
import back from '@/components/m-shop/m-store/back'
import noorder from '@/components/m-shop/m-noorder/noorder'
import {data} from '@/common/js/return'

export default {
	name:'transfer',
	components:{
			back,
			noorder
		},
	data () {
		return {
			shopList:{},
			list:data.list,
			title:'退货调拨',
			status:'',
			sort:'',
			isShow:false
		}
	},
	created () {
		this.getList()
	},
	mounted () {
		
	},
	methods:{
		//获取数据
			getList () {
				this.$http.get(this.$store.state.reqUrl + this.$route.query.shop_url,{
					params:{
						statu:this.status,
						shopId:this.$store.state.shop_id
					}					
				}).then(res => {
					if(res.data.list.length === 0){
						this.isShow = true;
						this.shopList = res.data.list;
					}else{
						this.shopList = res.data.list;
						this.isShow = false;
					}
			    })
			},
			//筛选
			screen (status,index) {
				this.sort = index;
				this.status = status;
				this.getList();
			},
			//退货申请
			apply () {
				this.$router.push("/returnrequest")
			}
	}
}
</script>

<style lang="less" scoped> 
   .transfer {
   	.box {
   		position: fixed;
   		top: 100px;
   		left: 0;
   		width: 100%;
   		.apply {
   			height: 80px;
   			background: #FFFFFF;
   			font-size: 28px;
   			line-height: 80px;
   			padding-right: 30px;
   			color: darkgray;
   			border-bottom: 1px solid #F6F6F6;
   			p {
   				float: right;
   				display: inline-block;
   			}
   			i {
   				line-height: 80px;
   				float: right;
   				font-size: 30px;
   				display: inline-block;
   			}
   		}
   		.screen {
   			background: #FFFFFF;
   			height: 120px;
   			margin-bottom: 30px;
   			display: flex;
   			.change {
   				flex: 1;
   				line-height: 35px;
   				margin: 30px 0;
   				color: grey;
   				text-align: center;
   				&.active {
   					color: red;
   				}
   				i {
   					font-size: 48px;
   				}
   				p{
   					font-size: 22px;
   				}
   			}
   		}
   	}
   	.body {
   		margin-top: 320px;
   		.orderlist {
   			width: 100%;
   			border-bottom: 1px solid gainsboro;
   			background: #FFFFFF;
   			.header {
   				padding: 25px 20px;
   				font-size: 28px;
   				line-height: 0.6rem;
   				display: flex;
   				.headerleft {
   					font-size: 24px;
   					flex: 1;
   					.username {
   						font-size: 28px;
   					}
   					.purchaseOrderSerial {
   						color: darkgrey;
   					}
   				}
   				.headerright {
   					font-size: 24px;
   					text-align: right;
   					flex: 1;
   					.status {
   						font-size: 28px;
   					}
   					.createtime {
   						color: darkgrey;
   					}
   				}
   			}
   			.goodsList {
   				display: flex;
   				border-top: 1px solid gainsboro;
   				padding: 20px 30px;
   				.left {
   					width: 120px;
   					height:120px;
   					img {
   						width: 100%;
   						height: 100%;
   					}
   				}
   				.right {
   					flex: 1;
   					font-size: 24px;
   					color: dimgrey;
   					margin-left: 20px;
   					.title {
   						font-size: 28px;
   						color: #000000;
   						font-weight: 700;
   					}
   					.shortDesc{
   						line-height: 30px;
   					}
   				}
   			}
   		}
   	  }
   }
</style>